---
id: accordion
title: Accordion
description: A collapsible component for displaying content in a vertical stack.
---

<ComponentPreview id="Accordion" />

## Features

- Full keyboard navigation
- Supports horizontal and vertical orientation
- Right-to-Left (RTL) support
- Single or multiple item expansion
- Controlled and uncontrolled modes
- Collapse each accordion item

## Anatomy

To set up the accordion correctly, it's essential to understand its anatomy and the naming of its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="accordion" />

## Examples

### Default Expanded State

Set the `defaultValue` prop to specify which item should be expanded by default.

<Example id="basic" />

### Collapsible

Use the `collapsible` prop to allow the user to collapse all panels.

<Example id="collapsible" />

### Multiple Panels

Use the `multiple` prop to allow multiple panels to be expanded simultaneously.

<Example id="multiple" />

### Horizontal Orientation

By default, the Accordion is oriented vertically. Use the `orientation` prop to switch to a horizontal layout.

<Example id="horizontal" />

### Using the Root Provider

The `RootProvider` component provides a context for the accordion. It accepts the value of the `useAccordion` hook. You
can leverage it to access the component state and methods from outside the accordion.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

### Accessing context

Use the `Accordion.Context` component or `useAccordionContext` hook to access the state of an accordion. It exposes the
following properties:

- `focusedValue`: The value of the focused accordion item.
- `value`: The value of the selected accordion items.
- `setValue`: A method to set the selected accordion items.

<Example id="context" />

### Accessing the item context

Use the `Accordion.ItemContext` component or `useAccordionItemContext` hook to access the state of an accordion item. It
exposes the following properties:

- `expanded`: Whether the accordion item is expanded.
- `focused`: Whether the accordion item is focused.
- `disabled`: Whether the accordion item is disabled.

<Example id="item-context" />

## Guides

### Animate Content Size

Use the `--height` and/or `--width` CSS variables to animate the size of the content when it expands or closes:

```css
@keyframes slideDown {
  from {
    opacity: 0.01;
    height: 0;
  }
  to {
    opacity: 1;
    height: var(--height);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    height: var(--height);
  }
  to {
    opacity: 0.01;
    height: 0;
  }
}

[data-scope='accordion'][data-part='item-content'][data-state='open'] {
  animation: slideDown 250ms ease-in-out;
}

[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
  animation: slideUp 200ms ease-in-out;
}
```

## API Reference

### Props

<ComponentTypes id="accordion" />

### Context

These are the properties available when using `Accordion.Context`, `useAccordionContext` hook or `useAccordion` hook.

<ContextType id="accordion" />

## Accessibility

This component complies with the
[Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).

### Keyboard Support

<KeyBindingsTable id="accordion" />
